<template>
	<scroll-view scroll-y class="video-main" enable-flex @scrolltolower="handleScrolltolower">
		<view class="video-item" v-for="item in videowp" :key="item.id" @click="handleGoVideo(item)">
			<image :src="item.img" mode="widthFix"></image>
		</view>
	</scroll-view>
</template>

<script>
	export default{
		props:{
			urlobj:Object
		},
		data(){
			return {
				videowp: [],
				hasMore: true
			}
		},
		watch:{
			urlobj(){
				this.getList()
			}
		},
		mounted() { 
			this.getList()
		},
		methods:{
			getList(){
				this.request({
					url: this.urlobj.url,
					data: this.urlobj.params
				}).then(result => {
					if(result.res.length === 0) {
						this.hasMore = false;
						uni.showToast({
							title:'没有数据了',
							icon:'none'
						})
					} else {
						// this.hasMore true;
						this.videowp = [this.videowp,...result.res.videowp];
					}
					
				})
			},
			handleScrolltolower(){
				if(this.hasMore) {
					this.urlobj.params.skip += this.urlobj.params.limit;
					this.getList()
				} else {
					uni.showToast({
						title:'没有数据了',
						icon:'none'
					})
				}
			},
			handleGoVideo(item){
				getApp().globalData.video = item;
				uni.navigateTo({
					url:'/pages/videoplay/videoplay'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-main{
		display: flex;
		flex-wrap: wrap;
		height: calc(100vh - 36px);
		.video-item{
			width: 33.33%;
			border: 5rpx solid #fff;
			image{
				height: 100%;
			}
		}
	}
</style>
